import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import ManagementLayout from '../management-layout'
import { Button, Col, Icon, Menu, Row } from 'antd'
import { connect } from 'react-redux'
import { deleteVideo, getMyVideos } from '../../../actions/video'
import VideoPreviewModal from './video-previer-modal'
import VideoBox from '../../common/video-box'

class VideosManagementBody extends React.Component {
  state = {
    currentTab: 'released',
    video: {},
    isPreviewModalOpen: false
  }

  componentDidMount = () =>{
    this.props.getMyVideos()
  }

  getCurrentTabVideos = () => {
    const {videos} = this.props
    const {currentTab} = this.state
    if (currentTab === 'released') {
      return videos.filter(video => video.isRelease)
    }
    return videos.filter(video => !video.isRelease)
  }

  preview = video => {
    this.setState({
      isPreviewModalOpen:true,
      video
    })
  }

  render () {
    const {currentTab,isPreviewModalOpen,video} = this.state
    return <ManagementLayout>
      <Link to='/serials-management/videos/new'>
        <Button type='primary'>添加</Button>
      </Link>
      <Menu
        onClick={({key}) => this.setState({currentTab: key})}
        selectedKeys={[currentTab]}
        mode='horizontal'
        style={{marginBottom: 30}}
      >
        <Menu.Item key='released'>
          <Icon type='notification'/>已发布
        </Menu.Item>
        <Menu.Item key='unReleased'>
          <Icon type='inbox'/>未发布
        </Menu.Item>
      </Menu>
      {
        <Row gutter={32}>
          {
            this.getCurrentTabVideos().map((video,index) => {
              return <Col span={8} className='margin-b-3'>
                <VideoBox
                  key={index}
                  needManagement
                  video={video}
                  preview={this.preview}
                  deleteVideo={id => this.props.deleteVideo(id)}/>
              </Col>
            })
          }
        </Row>
      }
      <VideoPreviewModal
        isPreviewModalOpen={isPreviewModalOpen}
        video={video}
        closeModal={()=>this.setState({isPreviewModalOpen:false})}
      />
    </ManagementLayout>
  }
}

const mapStateToProps = ({videos, user}) => ({
  videos,
  user
})
const mapDispatchToProps = dispatch => ({
  getMyVideos: () => dispatch(getMyVideos()),
  deleteVideo: id => dispatch(deleteVideo(id))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(VideosManagementBody))
